<template>
  <div class="hello">
    Helloworld组件
    <div class='slotLeft'>
      <slot v-bind:users="user"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "DetailRecord",
    data () {
      return {
        user: {
          name: 'oralinge',
          age: 18
        }
      }
    },
    mounted () {
      this.getUpperTag('get-element-by-id');
    },
    methods: {
      getUpperTag (foo) {
        let arr = foo.split('-');
        //console.log(arr[1].charAt(0).toUpperCase() + arr[1].substr(1, arr[1].length-1));
        for (let i = 1; i < arr.length; i++) {
          arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length-1);
        }
        const newStr = arr.join('');
        console.log(newStr);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .hello{
    width:700px;
    height:300px;
    background:#ccc;
    margin: 0 auto;
    margin-top:50px;
  }
  .slotLeft{
    width:300px;
    height:200px;
    background:red;
    margin:20px auto
  }
  .slotRight{
    width:300px;
    height:200px;
    float:right;
    background:pink;
  }
</style>

<!--<template>
  <div class="hello">
    Helloworld组件
    <div class='slotLeft'>
      <slot name='left'></slot>
    </div>
    <div class='slotRight'>
      <slot name='right'></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "DetailRecord"
  }
</script>

&lt;!&ndash; Add "scoped" attribute to limit CSS to this component only &ndash;&gt;
<style scoped>
  .hello {
    width:700px;
    height:300px;
    background:#ccc;
    margin: 0 auto;
    margin-top:50px;
  }
  .hello .slotLeft {
    width:300px;
    height:200px;
    float:left;
    background:red;
  }
  .hello .slotRight {
    width:300px;
    height:200px;
    float:right;
    background:pink;
  }

</style>-->

